<template>
  <div>
    <!-- 优化后的消息状态图标 -->
    <component
      :is="statusConfig[status].component"
      v-if="statusConfig[status].component && placement === 'end'"
      :class="statusConfig[status].class"
      class="h-[30px] w-[30px]"
    />
  </div>
</template>

<script setup lang="ts">
import { NoRead, ReadChated, ReadFail } from '@vben/icons';

import { msgStatusType } from '../../type';

defineProps({
  // 消息位置 判断右侧不显示
  placement: {
    type: String,
    default: '',
  },
  // 消息状态
  status: {
    type: Number as PropType<msgStatusType>,
    default: 1,
  },
});

// 消息状态配置映射
const statusConfig = {
  [msgStatusType.sendsuccess]: {
    component: ReadChated,
    class: 'text-blue-600',
  },
  [msgStatusType.Alreadyread]: {
    component: ReadChated,
    class: 'text-[#9DB492]',
  },
  [msgStatusType.sendmsg]: {
    component: NoRead,
    class: 'text-blue-600',
  },
  [msgStatusType.sendFail]: {
    component: ReadFail,
    class: 'text-red-600',
  },
};
</script>
